<template>
  <div>
    <el-menu
      router
      :default-active="$route.path"
      unique-opened
      :collapse="collapse"
      :background-color="tenthColor"
    >
      <el-submenu index="list">
        <template #title>
          <i class="el-icon-info"></i>
          <span>概览信息</span>
        </template>
        <!--      <router-link to="/">Home</router-link> |-->
        <el-menu-item index="/home">
          <template #title>
            <i class="el-icon-info"></i>
            <span>主页</span>
          </template>
        </el-menu-item>
        <!--      <router-link to="/about">About</router-link> |-->
        <!--        <el-menu-item index="/about">-->
        <!--          <template #title>-->
        <!--            <i class="el-icon-date"></i>-->
        <!--            <span>About</span>-->
        <!--          </template>-->
        <!--        </el-menu-item>-->
      </el-submenu>
      <!--      <router-link to="/mine1">雷区1</router-link> |-->
      <!--      <router-link to="/mine2">雷区2</router-link> |-->
      <!--      <router-link to="/mine3">雷区3</router-link> |-->
      <el-submenu index="mine">
        <template #title>
          <i class="el-icon-s-tools"></i>
          <span>基础练习</span>
        </template>
        <el-menu-item index="/mine1">
          <template #title>
            <i class="el-icon-circle-check"></i>
            <span>雷区1</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/mine2">
          <template #title>
            <i class="el-icon-circle-check"></i>
            <span>雷区2</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/mine3">
          <template #title>
            <i class="el-icon-circle-check"></i>
            <span>雷区3</span>
          </template>
        </el-menu-item>
      </el-submenu>
      <!--      <router-link to="/father">父子通信</router-link> |-->
      <!--      <router-link to="/promise">axios请求</router-link> |-->
      <el-submenu index="vue">
        <template #title>
          <i class="el-icon-dessert"></i>
          <span>进阶练习</span>
        </template>
        <!--        <el-menu-item index="/father">-->
        <!--          <template #title>-->
        <!--            <i class="el-icon-circle-plus"></i>-->
        <!--            <span>父子通信</span>-->
        <!--          </template>-->
        <!--        </el-menu-item>-->
        <el-menu-item index="/promise">
          <template #title>
            <i class="el-icon-circle-plus"></i>
            <span>axios请求</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/echarts">
          <template #title>
            <i class="el-icon-circle-plus"></i>
            <span>echarts绘图</span>
          </template>
        </el-menu-item>
      </el-submenu>
      <el-submenu index="react">
        <template #title>
          <i class="el-icon-dessert"></i>
          <span>采购模块</span>
        </template>
        <el-menu-item index="/shopSubmit">
          <template #title>
            <i class="el-icon-circle-plus"></i>
            <span>提交采购单</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/shopAudit">
          <template #title>
            <i class="el-icon-caret-top"></i>
            <span>审核采购单</span>
          </template>
        </el-menu-item>
      </el-submenu>
      <el-submenu index="reactive">
        <template #title>
          <i class="el-icon-dessert"></i>
          <span>Css练习</span>
        </template>
        <el-menu-item index="/cssFirst">
          <template #title>
            <i class="el-icon-circle-plus"></i>
            <span>Css第一练习园</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/cssSecond">
          <template #title>
            <i class="el-icon-caret-top"></i>
            <span>Css第二练习园</span>
          </template>
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>
<script>
/**
 * 页面核心数据结构体说明文档
 *
 *
 */
// import New from './components/New.vue';
import { tenthColor } from "@/styles.module.scss";
// console.log(warningColor);
export default {
  name: "NavSystem",
  components: {
    // New,Old,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
    // collapse: {
    //   type: Boolean,
    //   default: false,
    // },
  },
  data() {
    return {
      sampleD: "value",
      tenthColor: tenthColor || "teal",
    };
  },
  computed: {
    collapse() {
      return this.$store.state.collapse;
    },
    // sampleC() {
    //     return this.sampleD+'--';
    // }
  },
  created() {},
  mounted() {},
  methods: {
    sampleM() {},
  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
  },
};
</script>

<!--<style scoped>-->
<style lang="scss" scoped>
.el-menu {
  border: none;
  span {
    margin-left: 16px;
    font-size: 17px;
  }
}
</style>
